<template>
  <view>
    <!-- 轮播图的代码 -->
    <swiper class :autoplay="true" :interval="3000" :duration="1000" :circular="true" indicator-dots>
      <swiper-item>
        <view class="swiper-item">
          <image src="https://s2.loli.net/2022/08/14/nkc2pNTmtxYHhEs.jpg"></image>
        </view>
      </swiper-item>
      <!-- 第二张 -->
      <swiper-item>
        <view class="swiper-item">
          <image src="https://s2.loli.net/2022/08/14/ndCfqHzgXBr2t9A.jpg"></image>
        </view>
      </swiper-item>
      <!-- 第三张 -->
      <swiper-item>
        <view class="swiper-item">
          <image src="https://s2.loli.net/2022/08/14/SPKDQfsJaGVNOc1.jpg"></image>
        </view>
      </swiper-item>
    </swiper>
    
    
    <!-- 这是分类导航区域 -->
    <view class="nav-item">
      <!-- 第一张分类导航图 -->
      <view class="nav-item" @click="navClickHandler(item)">
        <image src="https://s2.loli.net/2022/08/15/ZfEs6X43AgdeVJR.jpg" class="nav_img"></image>
      </view> 
      <!-- 第二张分类导航图 -->
      <view class="nav-item">
        <image src="https://s2.loli.net/2022/08/15/tzvB7cLANZYpx3o.png" class="nav_img"></image>
      </view> 
    </view>
    
    <view class="nav-item1">
        <!-- 第三张分类导航图 -->
        <view class="nav-item1">
          <image src="https://s2.loli.net/2022/08/15/mtLfghx4HIzMprE.jpg" class="nav_img"></image>
        </view> 
        <!-- 第四张分类导航图 -->
        <view class="nav-item1">
          <image src="https://s2.loli.net/2022/08/15/IoF3ys7Nr9HSWET.jpg" class="nav_img"></image>
        </view> 
      </view>
    </view>
  </view>
</template>


<script>
  export default {
    data(){
      return {
       //轮播图的数据列表
        swiperList: [],
       // 分类导航的数据列表
        navList: []
      };
    },
    onLoad(){
      //调用方法，获取轮播图的数据
      this.getSwiperList()
      this.getNavList()
    },
    methods:{
      async getSwiperList() {
        const {data: res} = await uni.$http.get('/api/public/v1/sort/swiperdata')
        //请求失败
        if(res.meta.status !== 200) return uni.$showMsg()
        //请求成功
        this.swiperList = res.message
        uni.$showMsg('数据请求成功')
      },
      async getNavList() {
        const {data: res} = await uni.$http.get('/api/public/v1/sort/catitems')
        if(res.meta.status !== 200) return uni.$showMsg()
        this.navList = res.message
      },
      // 点击预约借伞，可跳转到首页，定位显示
      navClickHandler(item) {
       uni.switchTab({
        'url':'/pages/main/main'
       })
      }
    }
  }
</script>


<!-- 轮播图样式 -->
<style lang="scss">
swiper{
  height: 230px;
  .swiper-item,
  image{
    width: 100%;
    height:100%;
  }
}

// <!-- 分类导航样式设置 -->
.nav-item{
  display: flex;
  justify-content: space-around;
  margin: 7px 0;
  
  .nav_img{
  width: 365rpx;
  height: 300rpx; 
  }
}
.nav-item1{
  display: flex;
  justify-content: space-around;
  margin: 0px 0;
  
  .nav_img{
  width: 365rpx;
  height: 300rpx; 
  }
}
</style>